<ons-page>
    <ons-toolbar>
        <div class="left">
            <ons-back-button>返回</ons-back-button>
        </div>
        <div class="center">Modal 模态框</div>
    </ons-toolbar>

    <div style="padding: 20px;">
        <h3>Modal 模态框</h3>
        <p style="color: #666; line-height: 1.6;">
            Modal 是一个全屏遮罩层，通常用于显示加载状态或阻止用户操作。
        </p>

        <h3 style="margin-top: 30px;">基础 Modal</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-button onclick="showModal('modal1', 2000)">
                        显示 Modal (2秒)
                    </ons-button>
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('basic-modal-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-basic-modal-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-basic-modal-code" onclick="event.stopPropagation(); copyCode('basic-modal-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-basic-modal-code">
                <pre><code id="code-content-basic-modal-code">&lt;!-- HTML --&gt;
&lt;ons-button onclick="showModal('modal1', 2000)"&gt;
    显示 Modal (2秒)
&lt;/ons-button&gt;

&lt;ons-modal id="modal1"&gt;
    &lt;div style="text-align: center; color: white;"&gt;
        &lt;p style="font-size: 18px;"&gt;Modal 显示中...&lt;/p&gt;
    &lt;/div&gt;
&lt;/ons-modal&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
function showModal(modalId, duration) {
    var modal = document.getElementById(modalId);
    modal.show();
    
    setTimeout(function() {
        modal.hide();
    }, duration);
}
&lt;/script&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">带加载动画的 Modal</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-button onclick="showModal('modal2', 3000)">
                        显示加载动画 (3秒)
                    </ons-button>
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('loading-modal-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-loading-modal-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-loading-modal-code" onclick="event.stopPropagation(); copyCode('loading-modal-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-loading-modal-code">
                <pre><code id="code-content-loading-modal-code">&lt;!-- HTML --&gt;
&lt;ons-modal id="modal2"&gt;
    &lt;div style="text-align: center;"&gt;
        &lt;ons-progress-circular indeterminate&gt;&lt;/ons-progress-circular&gt;
    &lt;/div&gt;
&lt;/ons-modal&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">带文字提示的 Modal</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-button onclick="showModal('modal3', 2500)">
                        显示文字提示 (2.5秒)
                    </ons-button>
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('text-modal-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-text-modal-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-text-modal-code" onclick="event.stopPropagation(); copyCode('text-modal-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-text-modal-code">
                <pre><code id="code-content-text-modal-code">&lt;!-- HTML --&gt;
&lt;ons-modal id="modal3"&gt;
    &lt;div style="text-align: center; color: white;"&gt;
        &lt;ons-progress-circular indeterminate&gt;&lt;/ons-progress-circular&gt;
        &lt;p style="margin-top: 20px; font-size: 16px;"&gt;正在处理，请稍候...&lt;/p&gt;
    &lt;/div&gt;
&lt;/ons-modal&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">模拟数据加载</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <ons-card>
                    <div class="title">数据列表</div>
                    <div class="content">
                        <ons-list id="dataList">
                            <ons-list-item>
                                <div class="center">暂无数据</div>
                            </ons-list-item>
                        </ons-list>
                        <p style="text-align: center; margin-top: 15px;">
                            <ons-button onclick="loadData()">加载数据</ons-button>
                        </p>
                    </div>
                </ons-card>
            </div>
            <div class="code-actions" onclick="toggleCode('load-data-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-load-data-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-load-data-code" onclick="event.stopPropagation(); copyCode('load-data-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-load-data-code">
                <pre><code id="code-content-load-data-code">&lt;!-- HTML --&gt;
&lt;ons-button onclick="loadData()"&gt;加载数据&lt;/ons-button&gt;
&lt;ons-list id="dataList"&gt;&lt;/ons-list&gt;

&lt;ons-modal id="loadingModal"&gt;
    &lt;div style="text-align: center; color: white;"&gt;
        &lt;ons-progress-circular indeterminate&gt;&lt;/ons-progress-circular&gt;
        &lt;p style="margin-top: 20px;"&gt;正在加载数据...&lt;/p&gt;
    &lt;/div&gt;
&lt;/ons-modal&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
function loadData() {
    var modal = document.getElementById('loadingModal');
    modal.show();
    
    // 模拟网络请求
    setTimeout(function() {
        modal.hide();
        
        // 更新列表
        var list = document.getElementById('dataList');
        list.innerHTML = '';
        
        for (var i = 1; i &lt;= 5; i++) {
            var item = document.createElement('ons-list-item');
            item.innerHTML = '&lt;div class="center"&gt;' +
                '&lt;span class="list-item__title"&gt;数据项 ' + i + '&lt;/span&gt;' +
                '&lt;span class="list-item__subtitle"&gt;这是加载的数据内容&lt;/span&gt;' +
                '&lt;/div&gt;';
            list.appendChild(item);
        }
        
        ons.notification.toast('数据加载完成', { timeout: 1500 });
    }, 2000);
}
&lt;/script&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">模拟表单提交</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <ons-card>
                    <div class="content">
                        <p style="margin: 10px 0;">
                            <ons-input id="username" placeholder="用户名" float></ons-input>
                        </p>
                        <p style="margin: 10px 0;">
                            <ons-input type="password" id="password" placeholder="密码" float></ons-input>
                        </p>
                        <p style="text-align: center; margin-top: 15px;">
                            <ons-button modifier="cta" onclick="submitForm()">提交</ons-button>
                        </p>
                    </div>
                </ons-card>
            </div>
            <div class="code-actions" onclick="toggleCode('submit-form-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-submit-form-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-submit-form-code" onclick="event.stopPropagation(); copyCode('submit-form-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-submit-form-code">
                <pre><code id="code-content-submit-form-code">&lt;!-- HTML --&gt;
&lt;ons-input id="username" placeholder="用户名" float&gt;&lt;/ons-input&gt;
&lt;ons-input type="password" id="password" placeholder="密码" float&gt;&lt;/ons-input&gt;
&lt;ons-button modifier="cta" onclick="submitForm()"&gt;提交&lt;/ons-button&gt;

&lt;ons-modal id="submitModal"&gt;
    &lt;div style="text-align: center; color: white;"&gt;
        &lt;ons-progress-circular indeterminate&gt;&lt;/ons-progress-circular&gt;
        &lt;p style="margin-top: 20px;"&gt;正在提交...&lt;/p&gt;
    &lt;/div&gt;
&lt;/ons-modal&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
function submitForm() {
    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;
    
    if (!username || !password) {
        ons.notification.alert('请填写完整信息');
        return;
    }
    
    var modal = document.getElementById('submitModal');
    modal.show();
    
    // 模拟提交
    setTimeout(function() {
        modal.hide();
        ons.notification.alert({
            message: '提交成功！',
            title: '成功',
            callback: function() {
                document.getElementById('username').value = '';
                document.getElementById('password').value = '';
            }
        });
    }, 2000);
}
&lt;/script&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">长时间操作</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-button onclick="longOperation()">
                        执行长时间操作 (5秒)
                    </ons-button>
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('long-operation-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-long-operation-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-long-operation-code" onclick="event.stopPropagation(); copyCode('long-operation-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-long-operation-code">
                <pre><code id="code-content-long-operation-code">&lt;!-- HTML --&gt;
&lt;ons-button onclick="longOperation()"&gt;执行长时间操作&lt;/ons-button&gt;

&lt;ons-modal id="longModal"&gt;
    &lt;div style="text-align: center; color: white; padding: 20px;"&gt;
        &lt;ons-progress-circular indeterminate&gt;&lt;/ons-progress-circular&gt;
        &lt;p style="margin-top: 20px;"&gt;正在处理...&lt;/p&gt;
        &lt;p style="margin-top: 20px;"&gt;
            &lt;ons-progress-bar id="longProgress" value="0"&gt;&lt;/ons-progress-bar&gt;
        &lt;/p&gt;
        &lt;p style="margin-top: 10px;"&gt;
            &lt;span id="longProgressText"&gt;0%&lt;/span&gt;
        &lt;/p&gt;
    &lt;/div&gt;
&lt;/ons-modal&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
function longOperation() {
    var modal = document.getElementById('longModal');
    var progressBar = document.getElementById('longProgress');
    var progressText = document.getElementById('longProgressText');
    
    modal.show();
    
    var progress = 0;
    var interval = setInterval(function() {
        progress += 2;
        progressBar.value = progress;
        progressText.textContent = progress + '%';
        
        if (progress &gt;= 100) {
            clearInterval(interval);
            setTimeout(function() {
                modal.hide();
                ons.notification.toast('操作完成！', { timeout: 2000 });
                progressBar.value = 0;
                progressText.textContent = '0%';
            }, 500);
        }
    }, 100);
}
&lt;/script&gt;</code></pre>
            </div>
        </div>

        <div style="margin-top: 30px; padding: 20px; background-color: #f5f5f5; border-radius: 8px;">
            <h4>使用场景</h4>
            <ul style="color: #666; line-height: 1.8; margin: 10px 0; padding-left: 20px;">
                <li>数据加载中</li>
                <li>表单提交中</li>
                <li>文件上传/下载</li>
                <li>异步操作处理</li>
                <li>阻止用户操作</li>
            </ul>
        </div>

        <div style="margin-top: 20px; padding: 15px; background-color: #fff3cd; border-radius: 8px; border-left: 4px solid #ffc107;">
            <p style="margin: 0; color: #856404;">
                <ons-icon icon="md-warning" style="color: #ffc107;"></ons-icon>
                <strong>注意：</strong> Modal 会阻止用户的所有操作，使用时请确保操作能够及时完成。
            </p>
        </div>
    </div>

    <!-- 基础 Modal -->
    <ons-modal id="modal1">
        <div style="text-align: center; color: white;">
            <p style="font-size: 18px;">Modal 显示中...</p>
        </div>
    </ons-modal>

    <!-- 带加载动画的 Modal -->
    <ons-modal id="modal2">
        <div style="text-align: center;">
            <ons-progress-circular indeterminate></ons-progress-circular>
        </div>
    </ons-modal>

    <!-- 带文字提示的 Modal -->
    <ons-modal id="modal3">
        <div style="text-align: center; color: white;">
            <ons-progress-circular indeterminate></ons-progress-circular>
            <p style="margin-top: 20px; font-size: 16px;">正在处理，请稍候...</p>
        </div>
    </ons-modal>

    <!-- 数据加载 Modal -->
    <ons-modal id="loadingModal">
        <div style="text-align: center; color: white;">
            <ons-progress-circular indeterminate></ons-progress-circular>
            <p style="margin-top: 20px; font-size: 16px;">正在加载数据...</p>
        </div>
    </ons-modal>

    <!-- 表单提交 Modal -->
    <ons-modal id="submitModal">
        <div style="text-align: center; color: white;">
            <ons-progress-circular indeterminate></ons-progress-circular>
            <p style="margin-top: 20px; font-size: 16px;">正在提交...</p>
        </div>
    </ons-modal>

    <!-- 长时间操作 Modal -->
    <ons-modal id="longModal">
        <div style="text-align: center; color: white; padding: 20px;">
            <ons-progress-circular indeterminate></ons-progress-circular>
            <p style="margin-top: 20px; font-size: 16px;">正在处理...</p>
            <p style="margin-top: 10px; font-size: 14px; color: #ccc;">
                这可能需要几秒钟
            </p>
            <p style="margin-top: 20px;">
                <ons-progress-bar id="longProgress" value="0"></ons-progress-bar>
            </p>
            <p style="margin-top: 10px; font-size: 14px;">
                <span id="longProgressText">0%</span>
            </p>
        </div>
    </ons-modal>

    <script>
        function showModal(modalId, duration) {
            var modal = document.getElementById(modalId);
            modal.show();
            
            setTimeout(function() {
                modal.hide();
            }, duration);
        }

        function loadData() {
            var modal = document.getElementById('loadingModal');
            modal.show();
            
            // 模拟网络请求
            setTimeout(function() {
                modal.hide();
                
                // 更新列表
                var list = document.getElementById('dataList');
                list.innerHTML = '';
                
                for (var i = 1; i <= 5; i++) {
                    var item = document.createElement('ons-list-item');
                    item.innerHTML = '<div class="center">' +
                        '<span class="list-item__title">数据项 ' + i + '</span>' +
                        '<span class="list-item__subtitle">这是加载的数据内容</span>' +
                        '</div>';
                    list.appendChild(item);
                }
                
                ons.notification.toast('数据加载完成', {
                    timeout: 1500
                });
            }, 2000);
        }

        function submitForm() {
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;
            
            if (!username || !password) {
                ons.notification.alert('请填写完整信息');
                return;
            }
            
            var modal = document.getElementById('submitModal');
            modal.show();
            
            // 模拟提交
            setTimeout(function() {
                modal.hide();
                
                ons.notification.alert({
                    message: '提交成功！',
                    title: '成功',
                    callback: function() {
                        document.getElementById('username').value = '';
                        document.getElementById('password').value = '';
                    }
                });
            }, 2000);
        }

        function longOperation() {
            var modal = document.getElementById('longModal');
            var progressBar = document.getElementById('longProgress');
            var progressText = document.getElementById('longProgressText');
            
            modal.show();
            
            var progress = 0;
            var interval = setInterval(function() {
                progress += 2;
                progressBar.value = progress;
                progressText.textContent = progress + '%';
                
                if (progress >= 100) {
                    clearInterval(interval);
                    setTimeout(function() {
                        modal.hide();
                        ons.notification.toast('操作完成！', {
                            timeout: 2000
                        });
                        
                        // 重置进度
                        progressBar.value = 0;
                        progressText.textContent = '0%';
                    }, 500);
                }
            }, 100);
        }
    </script>
    <script src="../js/code-display.js"></script>
</ons-page>
